<template>
  <custom-dialog
    ref="dialog" :title="modalTitle"
    :before-confirm="beforeConfirm" :on-confirm="onConfirm"
  >
    <el-form ref="form" :model="info" :rules="rules">
      <el-form-item label="能源品种" prop="energyVarietiesTypeId">
        <energy-variety-picker v-model="info.energyVarietiesTypeId" filterable clearable @change="change('energyVarietiesType', $event)"></energy-variety-picker>
      </el-form-item>
      <el-form-item label="能源种类" prop="energyTypeId">
        <dictionary-picker dic-code="NENG_YUAN_ZHONG_LEI" v-model="info.energyTypeId" @change="change('energyType', $event)"></dictionary-picker>
      </el-form-item>
      <el-form-item label="能源用途" prop="energyUseId">
        <energy-purpose-picker v-model="info.energyUseId" filterable clearable @change="change('energyUse', $event)"></energy-purpose-picker>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="info.name" :maxlength="50"></el-input>
      </el-form-item>
    </el-form>
  </custom-dialog>
</template>

<script>
import CustomDialog from '@/components/custom-dialog'
import EnergyVarietyPicker from '@/components/energy-variety-picker'
import EnergyPurposePicker from '@/components/energy-purpose-picker'
import DictionaryPicker from '@/components/dictionary-picker'
import { saveOrUpdate } from '@/api/reportContent'

export default {
  name: 'operate-modal',
  props: {
    modalTitle: String,
    modalData: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  components: { CustomDialog, EnergyVarietyPicker, DictionaryPicker, EnergyPurposePicker },
  data () {
    return {
      info: {
        id: '',
        name: '',
        energyVarietiesTypeId: '',
        energyVarietiesTypeName: '',
        energyTypeId: '',
        energyTypeName: '',
        energyUseId: '',
        energyUseName: '',
      },
      rules: {
        energyVarietiesTypeId: [{ required: true, message: '必填项' }],
        energyTypeId: [{ required: true, message: '必填项' }],
        energyUseId: [{ required: true, message: '必填项' }],
        name: [{ required: true, message: '必填项' }],
      },
    }
  },
  mounted () {
    this.$watch(
      () => {
        const { energyVarietiesTypeName, energyTypeName, energyUseName } = this.info
        if (energyVarietiesTypeName && energyTypeName && energyUseName) {
          return `${energyVarietiesTypeName}-${energyTypeName}-${energyUseName}`
        }
        return ''
      },
      (val) => {
        this.info.name = val
      }
    )
  },
  methods: {
    open () {
      this.info = {
        ...this.$options.data().info,
        ...this.modalData,
      }
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
      this.$nextTick(() => {
        this.$refs.dialog.open()
      })
    },
    beforeConfirm () {
      return this.$refs.form.validate()
    },
    onConfirm (close) {
      const params = { ...this.info }
      if (!params.id) {
        delete params.id
      }
      return saveOrUpdate(params).then((res) => {
        if (res.code === 200) {
          this.$emit('save-success')
          this.$message.success('保存成功')
          close()
        }
      })
    },
    change (key, { name }) {
      this.info[key + 'Name'] = name
    },
  },
}
</script>

<style scoped>

</style>
